<template>
  <div class="echarts-box">
    <div ref="pieChart4" style="width: 30rem; height: 20rem;margin: 0 auto;"></div>
  </div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
 
const pieChart4 = ref(null);
onMounted(() => {
  const chartInstance = echarts.init(pieChart4.value);
  var pieData =  [
    { value: 40, name: '30天内' },
    { value: 25, name: '30-60天' },
    { value: 15, name: '60-90天' },
    { value: 10, name: '90-180天' },
    { value: 5, name: '一年以上' },
  ]
const option = {
  series: [
    {
      type: 'pie',
      color: [
        '#208AFF',
        '#63E3DF',
        '#766FFE',
        '#FF8F59',
        '',
      ],
      legend: {
        
      },
      data: pieData,
      radius: ['20%', '34%'],
      label: {
            show: true,
            color: '#D1D1D1',
            formatter: function (arg) {
                console.log(arg)
                return arg.data.name + '\n' + arg.value + '%'
            }
        },
    }
  ]
};
chartInstance.setOption(option);
});
</script>
 
<style lang="scss" scoped>
.echarts-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
</style>